<template>
  <div class="hello">
    <button @click='add1'>Child1-add1</button>
    <button @click='add2'>Child1-add2</button>
    <button @click='add3'>Child1-add3</button>
    Child1:username1:{{username1}}--usertest1:{{usertest1}}
    <Child3 v-bind="$attrs" v-on="$listeners"></Child3>
  </div>
</template>

<script>
import Child3 from '@/components/Child3'

export default {
    name: 'Child1',
    components: {
        Child3,
    },
    props: {
        //username1: String,
    },
    inject:['usertest1', 'usertest2'],
    data () {
        return {
            username: 'aa11',
        };
    },
    mounted () {
    },
    methods: {
        add1 () {
            console.log(11);
        },
        add2 () {
            this.$parent.testAdd2(333);
        },
        add3 () {
            console.log(33);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
